<template>
    <div>
        <setHeader title="新闻编辑" settext="完成" @done="gotobtn()"></setHeader>
        <div class="content">
            <div class="main-news_title">
                <label for="">标题：</label>
                <textarea placeholder="请输入内容"  style="-webkit-user-select:auto;"  contenteditable="true" v-model="newslist.Title"></textarea>
            </div>
            <div class="main_news_content">
                <label for="">内容：</label>
                <textarea placeholder="请输入内容"  style="-webkit-user-select:auto;"  contenteditable="true" v-model="newslist.summary"></textarea>
            </div>
            <!-- 添加新闻 -->
            <div class="insert_pic">
                <label for="">编辑图片：</label>
                <div class="main-product_manage">
                    <ul>
                        <li>
                                <camera  v-on:spot="spot" :headerimg="newslist.img" :type="type"></camera>
                        </li>

                    </ul>
                </div>    
            </div>
        </div>
        <so-footer></so-footer>
    </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
import camera from '../public/news_bar';
import soFooter from '../components/footer-bar';
    export default {
        data() {
            return {
                type:'edit',
                newslist: {
                    Title: '',
                    access_token: '',
                    summary:'',
                    img:''
                },
                proData:'',
                // new_name: '从零开始学习健身，第15天，参照第一天的样',
                hostlist: [
                    { 
                        link: '',
                    }
                ],
                id: '',
                c_id: ''
            }
        },
        mounted() {
            this.id = this.$route.query.id;
            this.c_id = window.localStorage.getItem('cpId');
            this.newslist.access_token = window.localStorage.getItem('access_token');
            this.newseditor();
        },
        methods: {
            spot:function(data){
                this.proData = data;
                console.log(data)
            },
            newseditor() {
                this.$fetch(this.$path + '/index.php/api/NewDetail/'+this.id).then((response) => {
                    console.log('编辑新闻', response); 
                    if(response.code == 200) {
                        this.newslist.Title = response.data.Title;
                        this.newslist.summary = response.data.summary;
                        this.newslist.img = response.data.img;
                    }
                })
            },
            gotobtn() {
                this.newslist.pro = this.proData;
                this.$post(this.$path + '/index.php/api/Newsave/'+this.id, this.newslist).then((response) => {
                    console.log('编辑新闻', response); 
                    if(response.code == 200) {
                        this.$router.replace({
                            path: '/userCenter/newsManage',
                            query: {cp_id: this.c_id,u_type:1}
                        })
                    }
                })
            },
            // goback(cp_id) {
            //     this.$router.push({
            //         path: '/newsManage',
            //         query: {cp_id: this.c_id}
            //     })
            // }
        },
        components: {
            setHeader,
            camera,
            soFooter
        }
    }
</script>

<style>
/* 标题 */
.main-news_title {
    display: flex;
    justify-content: flex-start;
    padding: 0.2rem 0 0 0.2rem;
    box-sizing: border-box;
}
.main-news_title label {
    width: 1.4rem;
    font-size: 0.28rem;
    color: #333;
    text-align: left;
}
.main-news_title textarea {
    width: 5.8rem;
    height: 1.4rem;
    outline: none;
    font-size: 0.28rem;
    color: #333;
}

/* 内容 */
.main_news_content {
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    padding: 0.2rem 0 0 0.2rem;
}
.main_news_content label {
    width: 1.4rem;
    font-size: 0.28rem;
    color: #333;
    text-align: left;
}
.main_news_content textarea {
    width: 5.8rem;
    height: 3.04rem;
    outline: none;
    font-size: 0.28rem;
    color: #333;
}

/* 添加图片 */
.insert_pic {
    padding: 0.3rem 0;
    box-sizing: border-box;
}
.insert_pic label {
    font-size: 0.28rem;
    color: #333;
    text-align: left;
    display: block;
    padding-left: 0.23rem;
}
.main-product_manage .add_active {
    width: 2.2rem !important;
    height: 2.2rem !important;
    background-color: #F2F2F2 !important;
    border-radius: 4px !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0.01rem;
}
.main-product_manage .add_active span {
    width: 1rem;
    height: 1rem;
    background-color: #e50838;
    border-radius: 50%;
    display: block;
    margin: 0.6rem;
}
.main-product_manage .add_active .icon-jia {
    font-size: 0.48rem;
    line-height: 1rem;
    vertical-align: text-top;
    text-align: center;
    color: #fff;
}
/* 图片排列 */
.main-product_manage {
    padding-top: 0.2rem;
}
.main-product_manage ul {
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}
.main-product_manage ul>li {
    text-align: center;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 0.3rem;
    /* margin-left: 0.23rem; */
}
.main-product_manage img {
    width: 2rem;
}



</style>